<!--
 * @Author: 曹捷
 * @Date: 2020-06-16 19:31:35
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-09-10 22:20:42
 * @Description: tabbar 自适应加载，种类不限
 bug点在于左右切换的时候，需要隐藏其他的swiper
-->
<template>
  <div class="tabs obit-tabs">
    <scroll-view :class="{ fixedTop: fixedTop }" :scroll-x="true" :show-scrollbar="false" class="scroll-h" id="tab-bar">
      <view :class="tabIndex == index ? 'uni-tab-item-title-active' : ''" :data-current="index" :id="tab.id" :key="tab.id" @click="ontabtap" class="uni-tab-item" v-for="(tab, index) in tabBars">
        <text class="uni-tab-item-title">{{ tab.name }}</text>
        <span class="activelab"></span>
      </view>
    </scroll-view>
    <div class="scroll-h-bak" v-if="fixedTop"></div>
    <slot></slot>
    <!-- #ifdef H5 -->
    <div class="fixed-foot-bak" v-if="bottomBak"></div>
    <!-- #endif -->

    <!-- <swiper :current="tabIndex" :duration="300" @change="changeTab" class="swiper-box" id="scroll" ref="scroll">
      <swiper-item :key="index" class="obit-swiper-item" v-for="(tab,index) in tabBars">
        <slot name="tab1" v-if="tabIndex ===0"></slot>
        <slot name="tab2" v-if="tabIndex ===1"></slot>
      </swiper-item>
    </swiper>-->
  </div>
</template>

<script>
export default {
  props: {
    tabBars: {
      type: Array,
    },
    tabIndex: {
      type: Number,
      required: true,
    },
    /**
    是否固定在顶部
    固定在顶部
    */
    fixedTop: {
      type: Boolean,
      default: false,
    },
    bottomBak: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      tableColums: [
        { type: 'dict', dictcode: 'trueFalse', key: 'hasPais', value: '是否填写PASI评分' },
        { type: 'date', key: 'scaleTime', value: '就诊日期' },
        { type: 'dict', dictcode: 'therapeutic', key: 'therapeutic', value: '治疗方案' },
        { type: 'input', key: 'bsaHead', value: 'BSA头部百分比（0-100%）' },
        { type: 'input', key: 'bsaUpper', value: 'BSA上肢百分比（0-100%）' },
        { type: 'input', key: 'bsaTrunk', value: 'BSA躯干百分比（0-100%）' },
        { type: 'input', key: 'bsaLower', value: 'BSA下肢百分比（0-100%）' },
        { type: 'dict', dictcode: 'PGA-hong', key: 'pgaHong', value: 'PGA皮损-红斑' },
        { type: 'dict', dictcode: 'PGA-sock', key: 'pgaSoak', value: 'PGA皮损-浸润' },
        { type: 'dict', dictcode: 'PGA-scale', key: 'pgaScale', value: 'PGA皮损-鳞屑' },
      ],
    }
  },
  methods: {
    ontabtap(e) {
      //点击tab-bar
      let index = e.currentTarget.dataset.current
      this.$emit('update:tabIndex', parseInt(index))
    },
  },
}
</script>

<style lang="scss">
.tabs {
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  //   height: calc(100vh - 44px - env(safe-area-inset-top));
  //   display: flex;
  .swiper-box {
    flex: 1;
    position: relative;
    height: auto;
  }
}

.line-h {
  height: 1rpx;
  background-color: #cccccc;
}

.uni-tab-item {
  display: inline-block;
  flex-wrap: nowrap;
  padding-left: 34rpx;
  padding-right: 34rpx;
  position: relative;
}
.activelab {
  background: #0738a3;
  height: 4upx;
  position: absolute;
  bottom: 10rpx;
  left: 10%;
  right: 10%;
  display: none;
}

.uni-tab-item-title {
  color: #555;
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.uni-tab-item-title-active {
  .uni-tab-item-title {
    font-weight: 600;
  }
  .activelab {
    display: inline-block;
  }
}

.swiper-item {
  flex: 1;
  flex-direction: row;
}

.scroll-v {
  flex: 1;
  flex-direction: column;
  width: 750rpx;
}
</style>
